<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div>
    <div class="common-bg" :style="{top: (statusBarHeight - 2) + 'px' }"></div>
    <div style="z-index: 2;position: relative;color: #333;">
      <u-my-layOut :navbarOption="{ bgColor: 'rgba(255,255,255,0)', title: '' }" :color="{ statusBarHeightColor: '#f6a5ac' }">
        <template v-slot:main>
          <div class="p30">
            <div class="fac">
              <uv-avatar size="110rpx" :src="userInfo.avatar"></uv-avatar>
              <div class="pl30">
                <div class="fz36" style="color: #333;font-weight: 500;">清风海棠</div>
                <div class="fz26" style="color: #333;">ID:1245668</div>
              </div>
            </div>
            <div class="p1757141588 fac jcsb">
              <div class="fz32" style="color: #fff;">账户余额</div>
              <div class="fac ">
                <div class="fz42 pr30" style="font-weight: 700;color: #fff;">¥500.5</div>
                <button class="common-button fz30 pt10 pb10" style="border-radius: 30rpx;color: #E60012;background-color: #fff;border-color: #fff;">提现</button>
              </div>
            </div>
            <div class="p1757141777 fac jcsb">
              <div class="fz28">累计收入: <div style="font-weight: 500;display: inline;">¥500.5</div>
              </div>
              <div class="fz28">累计提现: <div style="font-weight: 500;display: inline;">¥500.5</div>
              </div>
            </div>
            <div class="bfff pl30 pr30" style="border-radius: 20rpx;box-shadow: 4rpx 6rpx 10rpx 4rpx #efefef;">
              <uv-cell-group :border="false">
                <uv-cell :isLink="true" :center="false" :cellStyle="{ padding: '15px 0', backgroundColor: '#fff' }" :rightIconStyle="{ fontSize: '34rpx', color: '#333' }" :stop="false" :titleStyle="{ fontSize: '34rpx', lineHeight: 1, color: '#333' }" title="实名信息" />
                <uv-cell :isLink="true" :center="false" :cellStyle="{ padding: '15px 0', backgroundColor: '#fff' }" :rightIconStyle="{ fontSize: '34rpx', color: '#333' }" :stop="false" :titleStyle="{ fontSize: '34rpx', lineHeight: 1, color: '#333' }" title="意见反馈" />
                <uv-cell :isLink="true" :center="false" :cellStyle="{ padding: '15px 0', backgroundColor: '#fff' }" :rightIconStyle="{ fontSize: '34rpx', color: '#333' }" :stop="false" :titleStyle="{ fontSize: '34rpx', lineHeight: 1, color: '#333' }" title="关于我们" />
                <uv-cell :isLink="true" :center="false" :cellStyle="{ padding: '15px 0', backgroundColor: '#fff' }" :rightIconStyle="{ fontSize: '34rpx', color: '#333' }" :border="false" :stop="false" :titleStyle="{ fontSize: '34rpx', lineHeight: 1, color: '#333' }" title="设置" />
              </uv-cell-group>
            </div>
          </div>
        </template>

        <template v-slot:footer>
          <u-tabbar-list :activeIndex="2"></u-tabbar-list>

        </template>
      </u-my-layOut>
    </div>

  </div>
</template>

<script>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import tabbarVue from './components/tabbar.vue'
import myLayOutVue from './components/layOut.vue'

export default {
  components: {
    'u-my-layOut': myLayOutVue,
    'u-tabbar-list': tabbarVue
  },
  setup() {
    const user = useUserStore()
    const { userInfo } = storeToRefs(user)
    return {
      userInfo
    }
  },
  data() {
    return {
      statusBarHeight: 0,

    }
  },
  onShow() {
    try {
      this.statusBarHeight = uni.getWindowInfo().statusBarHeight || uni.getMenuButtonBoundingClientRect().top;
    } catch (error) {

    }
  }
}
</script>

<style>
page {
  color: #333;  background-color: #F7F8F8;

}
</style>
<style lang="scss" scoped>
@import "./common.scss";
.bg {
  top: 0;
  left: 0;
  position: absolute;
  width: 100vw;
  z-index: 1;
}

.p1757141588 {
  margin-top: 30rpx;
  background: linear-gradient(360deg, #f27781 0%, #e60012 100%);
  border-radius: 10rpx 10rpx 0 0;
  padding: 40rpx 30rpx;
}

.p1757141777 {
  background-color: #fff;
  border-radius: 0 0 10rpx 10rpx;
  padding: 25rpx 30rpx;
  margin-bottom: 30rpx;
}
</style>
